/*
 * @Author: ccccy 459250301@qq.com
 * @Date: 2023-03-17 19:46:57
 * @LastEditors: ccccy 459250301@qq.com
 * @LastEditTime: 2023-04-21 12:29:46
 * @FilePath: \web-frontend-master\src\pages\base\billingDetails\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { deleteBillingDetails, listBillingDetails } from '@/services/api/billingDetails';
//import { listBillingDetails } from '@/services/api/billingDetails';
import { convertPageData, orderBy } from '@/utils/request';
import { openConfirm } from '@/utils/ui';
import { PlusOutlined, DeleteOutlined, BulbTwoTone } from '@ant-design/icons';
import { ActionType, PageContainer,  ProColumns, ProForm, ProFormText, ProTable, useDebounceFn } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef, useState } from 'react';
import InputDialog from './InputDialog';
import React from 'react';
import { DatePicker, Space } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import { now } from 'moment';



export default () => {
  const refAction = useRef<ActionType>(null);
  const [selectedRowKeys, selectRow] = useState<number[]>([]);
  const [billingDetails, setBillingDetails] = useState<API.BillingDetailsVO>();
  const [visible, setVisible] = useState(false);
  const columns: ProColumns<API.BillingDetailsVO>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
      search: false,
    },
    {
      title: '消费对象',
      dataIndex: 'consumptionName',
      width: 100,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setBillingDetails(record);
              setVisible(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '消费金额',
      dataIndex: 'consumption',
      sorter:true,
      width: 100,
      search: false,
    },
    {
      title: '消费时间',
      sorter:true,
      dataIndex: 'consumptionTime',
      
      width: 100,
      //search: false,
    },
    {
      title: '起始时间',
      dataIndex: 'beginDate',
      width: 50,
      valueType : "date",
      hideInTable:true,
    },
    {
      title: '终止时间',
      dataIndex: 'endDate',
      valueType : "date",
      width: 50,
      hideInTable:true,
    },
    {
      title: '备注',
      dataIndex: 'note',
      width: 100,
      search: false,
    },
    {
      title: '修改时间',
      dataIndex: 'modificationTime',
      width: 150,
      search: false,
    },
  ];

  const handleDelete = async () => {
    if (!selectedRowKeys?.length) return;
    openConfirm(`您确定删除${selectedRowKeys.length}条记录吗`, async () => {
      await deleteBillingDetails(selectedRowKeys);
      refAction.current?.reload();
    });
  };

  return (
    <PageContainer>
      <ProTable<API.BillingDetailsVO>
        actionRef={refAction}
        rowKey="id"
        request={async (params = {},sorter) => {
          return convertPageData(await listBillingDetails({ ...params, orderBy: orderBy(sorter) }));
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              setBillingDetails(undefined);
              setVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
          <Button
            type="primary"
            key="primary"
            danger
            onClick={handleDelete}
            disabled={!selectedRowKeys?.length}
          >
            <DeleteOutlined /> 删除
          </Button>,
        ]}
        columns={columns}
        rowSelection={{
          onChange: (rowKeys) => {
            selectRow(rowKeys as number[]);
          },
        }}
      />
      <InputDialog
        detailData={billingDetails}
        onClose={(result) => {
          setVisible(false);
          result && refAction.current?.reload();
        }}
        visible={visible}
      />
    </PageContainer>
  );
};